<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
      CSS选择器的优先级别:
      1.在相同类型的选择器中,遵循:a.就近原则 b.叠加原则
      2.排序:
       复合选择器 > id选择器 > 类选择器 >  标签选择器
      3.范围越小,优先级别就越高
    -->
    <style>
        /*复合选择器*/
        div#main{ /*101*/
            color: purple;
        }
        /*id选择器*/
        #main{ /*100*/
            color: goldenrod;
        }

        /*类选择器*/
        .two{ /*10*/
            color: deeppink;
        }

        .one{ /*10*/
            color: orangered;
        }
        /*标签选择器*/
        div{ /*1*/
            color: red;
        }

        div{ /*1*/
            color: green;
        }

        div{ /*1*/
            color: blue;
            font-size: 100px;
        }

        /*通配符*/
        *{ /*1000*/
           color: cadetblue !important;
        }

    </style>
</head>
<body>
    <div id="main" class="one two" style="color: red;">1111111</div>
</body>
</html>